<template>
    <button @click="url = url+'1'">点我</button>
    {{url}}
</template>

<script setup>
import { ref, reactive, watch, watchEffect } from 'vue'
// watch() 是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，
// 立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。我们可以这样写：
const url = ref('https://...')
const data = ref(null)

async function fetchData() {
    debugger
    console.log(url.value);
    // const response = await fetch(url.value)
    // data.value = await response.json()
}

// 立即获取
fetchData()
// ...再侦听 url 变化
// 当侦听到url变化时，调用fetchData
watch(url, fetchData
// ,{immediate:true}
)

// 也可以不用watchEffect,直接使用immediate属性😅,也能达到一进来就侦听一次的效果。。。
watch(url, fetchData
,{immediate:true}
)
</script>


